import Vue from 'vue'

const component2 = {
    template: `
    <div>
    {{yeye.value}}---
    <input type='text' v-model='yeye.value'>
    </div>
    `,
    inject: [
        'yeye'
    ],
    data() {
        return {

        }
    },
    mounted() {
        console.log(this.yeye)
        console.log(this.$parent)
        console.log(this.$parent.value, this.$parent.$options.name)
    }
}

const component1 = {

    name: 'component1',
    components: {
        component2
    },

    data() {
        return{
            value: 'component1'
        }
    },
    template: `
        <div>
            <component2></component2>
            <slot name='header'></slot>
        </div>`,

}

new Vue({

    components: {
        component1
    },
    provide() {
        return {
            yeye: this
        }
    },
    el: '#app',
    data() {
        return {
            value: '123aaa',
        }
    },
    template: `
    <div>
    <component1>
    <span slot='header'>123</span>
    </component1>
    <input type='text' v-model='value'>
    </div>
    `,

})
